<template>
  <div class="containerBox">
    <!-- 先享后付（ZFB通道）数据统计区域 -->
    <div class="section">
      <h3 class="section-title">先享后付（ZFB通道）数据统计</h3>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">总扣款金额</p>
          <p class="card-value">¥ {{ getValue("total_deduction_amount","zfb_data")}}</p>
        </div>
        <div class="stat-card light-green">
          <p class="card-label">预计总扣款金额</p>
          <p class="card-value">¥ {{ getValue("expected_total_deduction_amount","zfb_data")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">待扣款金额</p>
          <p class="card-value">¥ {{ getValue("pending_deduction_amount","zfb_data")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">预计收益</p>
          <p class="card-value">¥ {{getValue("estimated_return","zfb_data")}}</p>
        </div>
        <div class="stat-card light-orange">
          <p class="card-label">已收益</p>
          <p class="card-value">{{ getValue("already_profitable","zfb_data")}}</p>
        </div>
      </div>
    </div>

    <!-- 聚合通道 & 银联分期通道 数据统计区域 -->
    <div class="section">
      <h3 class="section-title">聚合通道 ① & 银联分期通道 ① 数据统计</h3>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">成交订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalTradeAmt","aggregation_channel_1")}}</p>
        </div>
        <div class="stat-card light-green">
          <p class="card-label">退款订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalRefundAmt","aggregation_channel_1")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">应实收总额</p>
          <p class="card-value">¥ {{ getValue("totalReceivableAmt","aggregation_channel_1")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">流水抽佣总额</p>
          <p class="card-value">¥ {{ getValue("totalCommissionAmt","aggregation_channel_1")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">交易订单总数</p>
          <p class="card-value">¥ {{ getValue("totalTradeOrder","aggregation_channel_1")}}</p>
        </div>
      </div>
      <div class="card-row">
        <div class="stat-card light-orange">
          <p class="card-label">退款订单总数</p>
          <p class="card-value">{{ getValue("totalRefundOrder","aggregation_channel_1")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">净成交总数</p>
          <p class="card-value">{{ getValue("netTradeOrder","aggregation_channel_1")}}</p>
        </div>
      </div>
    </div>
    <!-- 聚合通道 ② & 银联分期通道 ② 数据统计 -->
    <div class="section">
      <h3 class="section-title">聚合通道 ② & 银联分期通道 ② 数据统计</h3>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">成交订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalTradeAmt","aggregation_channel_2")}}</p>
        </div>
        <div class="stat-card light-green">
          <p class="card-label">退款订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalRefundAmt","aggregation_channel_2")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">应实收总额</p>
          <p class="card-value">¥ {{ getValue("totalReceivableAmt","aggregation_channel_2")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">交易订单总数</p>
          <p class="card-value">¥ {{ getValue("totalTradeOrder","aggregation_channel_2")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">退款订单总数</p>
          <p class="card-value">{{ getValue("totalRefundOrder","aggregation_channel_2")}}</p>
        </div>
      </div>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">净成交总数</p>
          <p class="card-value">{{ getValue("netTradeOrder","aggregation_channel_2")}}</p>
        </div>
      </div>
    </div>
    <!-- 聚合通道 ③ & 花呗分期通道 ③ 数据统计 -->
    <div class="section">
      <h3 class="section-title">聚合通道 ③ & 花呗分期通道 ③ 数据统计</h3>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">成交订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalTradeAmt","aggregation_channel_3")}}</p>
        </div>
        <div class="stat-card light-green">
          <p class="card-label">退款订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalRefundAmt","aggregation_channel_3")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">应实收总额</p>
          <p class="card-value">¥ {{ getValue("totalReceivableAmt","aggregation_channel_3")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">交易订单总数</p>
          <p class="card-value">¥ {{ getValue("totalTradeOrder","aggregation_channel_3")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">退款订单总数</p>
          <p class="card-value">{{ getValue("totalRefundOrder","aggregation_channel_3")}}</p>
        </div>
      </div>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">净成交总数</p>
          <p class="card-value">{{ getValue("netTradeOrder","aggregation_channel_3")}}</p>
        </div>
      </div>
    </div>
    <!-- 安心付数据统计 -->
    <div class="section">
      <h3 class="section-title">安心付数据统计</h3>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">所有服务商（包括自己）累计金额利润</p>
          <p class="card-value">¥ {{ getValue("totalMerchantProfitAmt","anxinpay_data")}}</p>
        </div>
        <div class="stat-card light-green">
          <p class="card-label">所有服务商（包括自己）累计总退款</p>
          <p class="card-value">¥ {{ getValue("totalMerchantRefundAmt","anxinpay_data")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">流水分润可提现金额</p>
          <p class="card-value">¥ {{ getValue("withdrawableCommissionAmt","anxinpay_data")}}</p>
        </div>
      </div>
    </div>
    <!-- 微信先享后付&支付宝周期扣数据统计 -->
    <div class="section">
      <h3 class="section-title">微信先享后付&支付宝周期扣数据统计</h3>
      <div class="card-row">
        <div class="stat-card light-purple">
          <p class="card-label">成交订单笔数</p>
          <p class="card-value">{{ getValue("tradeOrderCount","wx_data")}}</p>
        </div>
        <div class="stat-card light-green">
          <p class="card-label">成交订单总金额</p>
          <p class="card-value">¥ {{ getValue("totalTradeAmt","wx_data")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">已履约扣款总期数</p>
          <p class="card-value">{{ getValue("fulfilledDeductPeriodCount","wx_data")}}</p>
        </div>
        <div class="stat-card light-blue">
          <p class="card-label">已履约扣款总金额</p>
          <p class="card-value">¥ {{ getValue("totalFulfilledDeductAmt","wx_data")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">履约中待扣款总期数</p>
          <p class="card-value">{{ getValue("pendingDeductPeriodCount","wx_data")}}</p>
        </div>
      </div>
      <div class="card-row">
        <div class="stat-card light-orange">
          <p class="card-label">履约中待扣款总金额</p>
          <p class="card-value">¥ {{ getValue("totalPendingDeductAmt","wx_data")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">已解约总期数</p>
          <p class="card-value">{{ getValue("terminatedPeriodCount","wx_data")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">已解约总金额</p>
          <p class="card-value">¥ {{ getValue("totalTerminatedAmt","wx_data")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">流水分润总金额</p>
          <p class="card-value">¥ {{ getValue("totalCommissionAmt","wx_data")}}</p>
        </div>
        <div class="stat-card light-purple">
          <p class="card-label">流水分润可提现金额</p>
          <p class="card-value">¥ {{ getValue("withdrawableCommissionAmt","wx_data")}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted,computed } from 'vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
// 字典
const dictData = {
  zfb_data : getIntDictOptions(DICT_TYPE.ZFB_DATA),
  aggregation_channel_1 : getIntDictOptions(DICT_TYPE.AGGREGATION_CHANNEL_1),
  aggregation_channel_2 : getIntDictOptions(DICT_TYPE.AGGREGATION_CHANNEL_2),
  aggregation_channel_3 : getIntDictOptions(DICT_TYPE.AGGREGATION_CHANNEL_3),
  anxinpay_data : getIntDictOptions(DICT_TYPE.ANXINPAY_DATA),
  wx_data : getIntDictOptions(DICT_TYPE.WX_DATA),
}


const getValue = (label,dictName) =>{
  let value = ''
    dictData[dictName].forEach((item) =>{
      if(item.label == label){
        console.log('item.value',item);
        value = item.value
      }
    })
    return value
}
</script>
<style scoped lang="scss">
.containerBox {
  width: 100% !important;
  background-color: #e9f0ff;
  padding: 20px;
}

.section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 16px;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  grid: 16;
  justify-content: flex-start;
  padding: 0 20px;
}

.stat-card {
  width: 16%;
  /* 5个卡片等分，减去gap的影响 */
  padding: 15px 10px 15px 24px;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 10px 3.2% 10px 10px;
}

.stat-card .card-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 58px;
}

.stat-card .card-value {
  font-size: 25.6px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.light-purple {
  background-color: #f0f2ff;
}

.light-green {
  background-color: #e6ffe6;
}

.light-blue {
  background-color: #e6f7ff;
}

.light-orange {
  background-color: #fff3e6;
}
::v-deep section {
  padding: 0 !important;
}
</style>
